// 模型选择
import Icon from "../_component/icon";
import Context from "./context";
import { useContext } from "react";

export default function ModalSelect() {
  // get routers from context
  const { routers, router, SetRouter } = useContext(Context);

  const selectItem = (router_name) => {
    const elem = document.activeElement;
    // 当前获取焦点的元素是不是在dropdown-content里面
    // 如果是，就 blur。让它失去焦点。这样 dropdown就会收回
    if (elem?.closest(".dropdown-content")) {
      elem?.blur();
    }

    // set selected item
    SetRouter(router_name);
  };

  return (
    <div id="modal-dropdown" className="dropdown dropdown-bottom">
      <div
        tabIndex={0}
        role="button"
        className="btn btn-sm flex-start w-52 justify-between"
      >
        <span className="flex justify-start text-xs">{router}</span>
        <Icon name="chevron-down" size="h-4 w-4" />
      </div>
      <ul
        tabIndex={0}
        className="dropdown-content menu bg-base-100 rounded-box z-[1] w-52 shadow"
      >
        {routers &&
          routers.map((router) => (
            <li key={router.id}>
              <a onClick={() => selectItem(router.name)}>{router.name}</a>
            </li>
          ))}
      </ul>
    </div>
  );
}
